<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <style>
        img {
            width: 500;
            height: 500px;
        }
    </style>

</head>

<body>
    <img src="https://gitee.com/eat-it-if-you-cant-recite-it/gallery/raw/master/img/eb450ec036aa4a572e72835ad49d449-2022-11-1722:17:39.jpg"
        width="500px" height="500px">
    <script>

        const imgs = ["https://gitee.com/eat-it-if-you-cant-recite-it/gallery/raw/master/img/eb450ec036aa4a572e72835ad49d449-2022-11-1722:17:39.jpg",
            "https://gitee.com/eat-it-if-you-cant-recite-it/gallery/raw/master/img/f79c85af961814652aca9b70e91fc9d-2022-11-1722:25:16.jpg",
            "https://gitee.com/eat-it-if-you-cant-recite-it/gallery/raw/master/img/6e73293c7bfae483b41f57d1825184a-2022-11-1722:25:11.jpg",
            "https://gitee.com/eat-it-if-you-cant-recite-it/gallery/raw/master/img/f767f0d6471c152172f48e86c701c2f-2022-11-1722:25:20.jpg"
        ]
        var img = document.getElementsByTagName("img")[0];
        console.log(img);
        var i = 0;
        function fn() {
            if (i <= 2) {
                i++;

            } else {
                i = 0;
            }
            img.src = imgs[i]
        }

        setInterval(fn, 3000)

    </script>

</body>

</html>